<template>
  <div class="yk-navbar">
    <div class="yk-nb-left" @click="emit('clickLeft')">
      <slot name="left" />
    </div>
    <div class="yk-nb-title" @click="emit('clickTitle')">
      <slot />
    </div>
    <div class="yk-nb-right" @click="emit('clickRight')">
      <slot name="right" />
    </div>
  </div>
</template>

<script>
export default {
  setup(props, {emit}){
    return {
      emit
    }
  }
}
</script>

<style lang="less" scoped>
.yk-navbar{
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
}
.yk-nb-left, .yk-nb-right{
  width: 4rem;
  flex: 0 0 4rem;
}
.yk-nb-right{
  text-align: right;
}
.yk-nb-title{
  font-weight: bold;
  font-size: 1.12rem;
  flex: 1 1 auto;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>